<template>
	<view class="content">
    <!-- navbarr -->
    <view class="navbar">
      <u-navbar 
        back-icon-color="white" 
        :title="type == 1 ? `购买${tokenType}` : `出售${tokenType}`" 
        title-color="white"
        :border-bottom="false"
        :background="{'background': 'linear-gradient(to right, #15295b, #213e8a)'}"></u-navbar>
    </view>
    <!-- container -->
    <view class="count-down">
      <view class="count-price">
        <text class="text">￥{{ price }}</text>
        <text class="small"> / {{ tokenType }}</text>
      </view>
      <view class="count-time">
        <text class="text">还剩</text>
        <text class="text-count">{{ countTime }}s</text>
        <text class="text">，超时自动取消</text>
        <text class="pay-text">
          {{ payment.replace(/,/g, ' | ') }}
        </text>
      </view>
    </view>
		<view class="write-pice">
      <view class="write-icon-link">
        <image src="../../static/icon/icon-link.png" mode="aspectFit" class="image"></image>
      </view>
		  <view class="input-box" :class="[radioActive == 0 ? 'input-box-active' : '']">
        <u-input height="100" type="number" v-model="oWantForm.nums" placeholder="请输入想要购买总数量" @input="onCalcNums" @focus="radioActive = 0"></u-input>
        <text class="text">{{ tokenType }}</text>
        <text class="on-all" @click="onAll(0)">全部</text>
      </view>
		  <view class="input-box" :class="[radioActive == 1 ? 'input-box-active' : '']">
        <u-input height="100" type="number" v-model="oWantForm.amount" placeholder="请输入想要购买总金额" @input="onCalcAmount" @focus="radioActive = 1"></u-input>
        <text class="text">CNY</text>
        <text class="on-all" @click="onAll(1)">全部</text>
      </view>
      <view class="limits-box">
        <text>限额{{ limits.min }}-{{ limits.max }}CNY</text>
      </view>
      <view class="btn-box">
        <u-button type="primary" :disabled="isDisabled" @click="onPurchase">{{ type == 1 ? '购买' : '出售' }}</u-button>
      </view>
		</view>
    <view class="p-cell-group">
      <view class="p-cell">
        <text class="text">卖家信息</text>
      </view>
      <view class="p-cell">
        <text class="text">卖家昵称</text>
        <view class="p-cell-right">
          <text class="pr-text">{{ sellInfo.user ? sellInfo.user.user_name : '' }}</text>
          <image src="../../static/icon/icon-v.png" mode="aspectFit" class="imageicon"></image>
        </view>
      </view>
      <view class="p-cell">
        <text class="text">单数完成率</text>
        <view class="p-cell-right">
          <text class="pr-text">
            {{ (sellInfo.ofUJiner || 0) - (sellInfo.ofSQShenyuJiner || 0) }} 
            <!-- /{{ (1 - sellInfo.ofSQShenyuJiner / sellInfo.ofUJiner).toFixed(2) * 100 }}% -->
          </text>
        </view>
      </view>
      <!-- <view class="p-cell">
        <text class="text">认证等级</text>
        <view class="p-cell-right">
          <text class="pr-text"> </text>
        </view>
      </view>
      <view class="p-cell">
        <text class="text">放币时效</text>
        <view class="p-cell-right">
          <text class="pr-text"> </text>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        type: 0,
				countTime: 59,
        timer: null,
        id: 0,
        tokenType: '',
        price: 7.00,
        radioActive: 0,
        oWantForm: {
          nums: '',
          amount: ''
        },
        payment: '',
        sellInfo: {}
			};
		},
    computed: {
      limits () {
        return {
          min: '1',
          max: ((this.sellInfo.ofSQShenyuJiner * this.sellInfo.ofPrice) || 1).toFixed(2)
        }
      },
      isDisabled () {
        return !this.oWantForm.nums || !this.oWantForm.amount
      }
    },
    onLoad (options) {
      this.type = options.type || 0
      this.id = options.id || 0
      this.tokenType = options.tokenType || ''
      this.payment = options.payment || ''
      this.price = options.price || ''
      this.onCountTime()
      this.getInfo()
    },
    onHide () {
      clearInterval(this.timer)
    },
    onUnload () {
      console.log(1)
      clearInterval(this.timer)
    },
    methods: {
      // 获取订单信息
      getInfo () {
        uni.showLoading()
        this.$api.http
        .get(`assistance/CurrencyTransaction/wantUnInvest?id=${this.id}`)
        .then((res) => {
          uni.hideLoading()
          if (res.status == 200) {
            this.sellInfo = res.data
          } else {
            this.$api.msg(res.msg)
          }
        })
      },
      // 确认购买 or 出售
      onPurchase () {
        uni.showLoading({
          mask:true
        })
        this.$api.http
        .post('assistance/CurrencyTransaction/dealInvestAction', {
          id: this.id,
          num: this.oWantForm.nums
        })
        .then((res) => {
          uni.hideLoading()
          if (res.status == 200) {
            let id = res.data.id
            uni.navigateTo({
              url: `./order?id=${id}&type=${this.type}&tokenType=${this.tokenType}&amount=${this.oWantForm.amount}`
            })
          } else {
            this.$api.msg(res.msg)
          }
        })
      },
      onAll () {
        this.oWantForm.amount = this.limits.max
        this.oWantForm.nums = (this.oWantForm.amount / this.price).toFixed(2).toString()
      },
      onCountTime () {
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (this.countTime > 0) {
            this.countTime --
          } else {
            clearInterval(this.timer)
            uni.navigateBack()
          }
        }, 1000)
      },
      onCalcNums (val) {
        this.oWantForm.amount = Number(val * this.price).toFixed(2).toString()
        if (this.oWantForm.amount == '0.00') {
          this.oWantForm.amount = ''
        }
      },
      onCalcAmount (val) {
        this.oWantForm.nums = Number(val / this.price).toFixed(2).toString()
        if (this.oWantForm.nums == '0.00') {
          this.oWantForm.nums = ''
        }
      }
    }
	}
</script>

<style lang="scss">
page {
  background-color: $bg-gap;
}
.count-down {
  position: relative;
  background: linear-gradient(to right, #15295b, #213e8a);
  padding: 20rpx 30rpx 100rpx;
  .count-price {
    font-size: 38rpx;
    color: #fff;
    .small {
      font-size: 24rpx;
      opacity: .6;
    }
  }
  .count-time {
    font-size: 24rpx;
    color: #fff;
    margin-top: 20rpx;
    display: flex;
    .text-count {
      color: #c97932;
    }
    .pay-text {
      margin-left: auto;
    }
  }
}
.write-pice {
  background-color: $bg-theme;
  box-shadow: 0 4rpx 20rpx rgba($color: #000000, $alpha: 0.1);
  width: 700rpx;
  height: 450rpx;
  margin: -60rpx auto 0;
  position: relative;
  z-index: 10;
  padding: 20rpx 0 20rpx 40rpx;
  border-radius: $uni-border-radius-lg;
}
.write-icon-link {
  position: absolute;
  left: 20rpx;
  top: 140rpx;
  width: 40rpx;
  height: 40rpx;
  .image {
    width: 100%;
    height: 100%;
    opacity: .6;
  }
}
.input-box {
  display: flex;
  align-items: center;
  border-radius: $uni-border-radius-lg;
  margin: 20rpx 30rpx;
  border: 4rpx solid $uni-text-color-grey;
  padding-left: 20rpx;
  font-size: 24rpx;
  color: $color-theme;
  &.input-box-active {
    border-color: #3c4fbf;
  }
  .on-all {
    padding: 0 20rpx;
    color: #2d4cbf;
    border-left: 1rpx solid $uni-text-color-grey;
  }
  .text {
    padding: 0 20rpx;
  }
}
.btn-box {
  padding: 0 20rpx;
  margin-left: -40rpx;
}
.limits-box {
  padding: 0 32rpx 20rpx;
  font-size: 24rpx;
  color: $color-theme;
}
.p-cell-group {
  background-color: $bg-theme;
  box-shadow: 0 4rpx 20rpx rgba($color: #000000, $alpha: 0.1);
  width: 700rpx;
  margin: 40rpx auto 0;
  position: relative;
  z-index: 10;
  padding: 10rpx 0 20rpx;
  border-radius: $uni-border-radius-lg;
}
.p-cell {
  padding: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: $color-theme;
  .text {
    font-size: 28rpx;
    line-height: 46rpx;
    width: 150rpx;
  }
  .p-cell-right {
    width: calc(100% - 150rpx);
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    .pr-text {
      margin: 0 10rpx;
    }
    .imageicon {
      width: 42rpx;
      height: 42rpx;
    }
  }
}
</style>
